import { WeaSelect, WeaLocaleProvider, WeaInput, WeaInputNumber } from "ecCom";
import Props from "../base/Props";
import defaultData from "./data";
import { Row } from 'antd';
import app from '../../../../../apis/app';

const getLabel = WeaLocaleProvider.getLabel;

export default class BoardElementProps extends Props {

  state = { 
    boardWidgets: []
  }

  componentDidMount() {
    const { appid } = this.props;

    app.getBoardWidgets(appid).then(res => {
      this.setState({ boardWidgets: res || [] })
    })
  }

  refsChartType = (val) => {
    const { boardWidgets } = this.state;

    const tempChart = boardWidgets.find(bw => bw.id === val);

    return {
      chartType: tempChart.type,
      chartName: tempChart.name
    }
  } 

  renderTipContent() {
    return (
      <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@8kp7hj`}>
        <label className='browserHrm-tip'>
          <span>{getLabel('522374', '当前插件在填报时只有OA用户才会显示')}</span>
        </label>
      </Row>
    );
  }

  renderContent () {
    const { boardWidgets } = this.state;
    const { data: { defaultValue, chartHeight, chartType } } = this.props;
    const opts = boardWidgets.map(({ name, id }) => {
      return {
        showname: name,
        key: id
      };
    });
    return (
      <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_undefined@aaqckq`}>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@ta11k3`} className='board-element-props'>
          <label>{getLabel('519598', '选择图表元素')}</label>
          <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@exk1j9`}
            style={{
              width: '100%'
            }}
            options={opts}
            value={defaultValue}
            onChange={this.handlePropChange('defaultValue:(refs=refsChartType)')}
          />
          <label className='board-tip'>
            <span>{getLabel('519599', '此处可选择本应用分析看板中的图表元素')}</span>
          </label>
        </Row>
        {
          chartType !== 'DIGITALPANEL' && chartType !== 'DATAPANEL' && chartType !== '' ?
          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@3j0dy7`}>
              <label>{getLabel('522373', '图表高度设置')}</label>
              <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@g6gamr`} defaultValue={chartHeight} onBlur={this.handlePropChange('chartHeight')} />
          </Row>
          : null
        }
      </React.Fragment>
    );
  }
}

BoardElementProps.defaultProps = {
  data: defaultData
};

